<template>
    <view class="weui-tabs">
        <view class="weui-tabs-bar__wrp">
            <scroll-view scroll-x :scroll-into-view="'item_' + currentView" :scroll-with-animation="animation">
                <view class="weui-tabs-bar__content">
                    <block v-for="(item, index) in tabs" :key="item.title">
                        <view
                            :id="'item_' + index"
                            class="weui-tabs-bar__item"
                            :style="'background-color: ' + tabBackgroundColor + '; color: ' + (activeTabClone === index ? tabActiveTextColor : tabInactiveTextColor) + ';'"
                            @tap="handleTabClick"
                            :data-index="index"
                        >
                            <view
                                :class="'weui-tabs-bar__title ' + tabClass + ' ' + (activeTabClone === index ? activeClass : '')"
                                :style="'border-bottom-color: ' + (activeTabClone === index ? tabUnderlineColor : 'transparent')"
                            >
                                <text class="">{{ item.title }}</text>
                            </view>
                        </view>
                    </block>
                </view>
            </scroll-view>
        </view>
        <swiper :class="swiperClass" :current="activeTabClone" :duration="duration" @change="handleSwiperChange">
            <swiper-item v-for="(item, index) in tabs" :key="item.title">
                <slot :name="'tab-content-' + index"></slot>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
export default {
    data() {
        return {
            currentView: 0,
            activeTabClone: 0
        };
    },
    options: {
        addGlobalClass: true,
        pureDataPattern: /^_/,
        multipleSlots: true
    },
    props: {
        tabs: {
            type: Array,
            default: () => []
        },
        tabClass: {
            type: String,
            default: ''
        },
        swiperClass: {
            type: String,
            default: ''
        },
        activeClass: {
            type: String,
            default: ''
        },
        tabUnderlineColor: {
            type: String,
            default: '#07c160'
        },
        tabActiveTextColor: {
            type: String,
            default: '#000000'
        },
        tabInactiveTextColor: {
            type: String,
            default: '#000000'
        },
        tabBackgroundColor: {
            type: String,
            default: '#ffffff'
        },
        activeTab: {
            type: Number,
            default: 0
        },
        swipeable: {
            type: Boolean,
            default: true
        },
        animation: {
            type: Boolean,
            default: true
        },
        duration: {
            type: Number,
            default: 500
        }
    },
    watch: {
        activeTab: {
            handler: function activeTab(_activeTab) {
                this.activeTabClone = this.deepClone(this.activeTab);
                var len = this.tabs.length;

                if (len === 0) {
                    return;
                }

                var currentView = _activeTab - 1;

                if (currentView < 0) {
                    currentView = 0;
                }

                if (currentView > len - 1) {
                    currentView = len - 1;
                }

                this.setData({
                    currentView: currentView
                });
            },

            immediate: true,
            deep: true
        }
    },
    created: function created() {},
    methods: {
        handleTabClick: function handleTabClick(e) {
            var index = e.currentTarget.dataset.index;
            this.setData({
                activeTabClone: index
            });
            this.$emit('tabclick', {
                detail: {
                    index: index
                }
            });
        },
        handleSwiperChange: function handleSwiperChange(e) {
            var index = e.detail.current;
            this.setData({
                activeTabClone: index
            });
            this.$emit('change', {
                detail: {
                    index: index
                }
            });
        }
    }
};
/***/
</script>
<style>
.weui-tabs {
    width: 100%;
}
.weui-tabs-bar__wrp {
    width: 100%;
    background: #fff;
}
.weui-tabs-bar__content {
    width: 100%;
    white-space: nowrap;
}
.weui-tabs-bar__item {
    display: inline-block;
}
.weui-tabs-bar__title {
    display: inline-block;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
}
</style>
